import React,{useState} from 'react'
import { ResultPage, Card, Input, Button, CapsuleTabs } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
function Index() {
  const nav=useNavigate()
  const [start,setStart]=useState()
  const [end,setEnd]=useState()
  const handeToList=()=>{
    nav(`/list?start=${start}&end=${end}`)
  }
  return (
    <div>
        <ResultPage
      status=''
      title=''
      description=''
    >
      <ResultPage.Card style={{  padding: 8 }}>
         <CapsuleTabs>
          <CapsuleTabs.Tab title='单程' key='单程'>
             <Input
          placeholder='请输入出发地'
          value={start}
          onChange={start => {
            setStart(start)
          }}
        />
         <Input
          placeholder='请输入目的地'
          value={end}
          onChange={end => {
            setEnd(end)
          }}
        />
        <Button onClick={()=>handeToList()} block type="submit" color="primary" size="large" >
          提交
        </Button>
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='往返' key='往返'>
            往返
          </CapsuleTabs.Tab>
          <CapsuleTabs.Tab title='特价' key='特价'>
            特价
          </CapsuleTabs.Tab>
        </CapsuleTabs>
      
      </ResultPage.Card>

      <Card style={{ height: 128, marginTop: 12 }}>搭配 Card 使用</Card>
    </ResultPage>
    </div>
  )
}

export default Index